<template>
  <div class="centercharts" :style="obj">
      <div class="toptimetext">
          <span>东陵路站点</span>
          <span>5月26日 16时</span>
          <img src="../assets/del.png" alt="" @click="del()">
      </div>
      <div class="bottomcharts">
          <div>
              <p>AQI</p>
              <p>34</p>
          </div>
          <div>
              <p>PM2.5</p>
              <p>14</p>
          </div>
          <div>
              <p>PM10</p>
              <p>31</p>
          </div>
          <div>
              <p>SO2</p>
              <p>13</p>
          </div>
          <div>
              <p>NO2</p>
              <p>15</p>
          </div>
          <div>
              <p>CO</p>
              <p>0.2</p>
          </div>
          <div>
              <p>O3</p>
              <p>107</p>
          </div>
      </div>
      <div class="zhucharts2"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
  export default {
      data() {
          return {
              obj:{'z-index':-1}
          }
      },
      mounted() {
          this.getzhucharts2()
      },
      methods:{
          getzhucharts2() {
              var myChart = echarts.init(document.querySelector(".zhucharts2"));
              var option = {
				backgroundColor: '#fff',
				tooltip: {
					show:true,
					trigger: 'item',
					backgroundColor: 'rgba(0,0,0,0.5)',
					axisPointer: {
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FFD56E'
								}, {
									offset: 0.5,
									color: '#fff',
								}, {
									offset: 1,
									color: '#FFD56E'
								}],
								global: false
							}
						},
					}
				},
				legend: {
					right: 20,
					top: 0,
					itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
					itemWidth: 30, // 图例图形宽度
					itemHeight: 10, // 图例图形高度
					textStyle: {
						color: 'red',
						fontWeight: 'normal',
						fontSize: 14
					},
				},
				grid: {
					top: '10%',
					left: '10%',
					right: '1%',
					bottom: '15%',
				},
				xAxis: [
					{
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13','14','15'] ,
						axisTick: {
							show: false // 是否显示坐标轴轴线
						},
						axisLabel: {
							color: '#282828'
						},
						splitLine: {
							show: false
						},
						boundaryGap: true,
						axisLine: { //坐标轴轴线相关设置。
							show: true,
							inside: false,
							lineStyle: {
								color: '#000'
							}
						}
					},
				],

				yAxis: [{
					type: 'value',
					min: 0,
					splitNumber: 4,
					splitLine: {show: true},
					axisLabel: { //坐标轴刻度标签的相关设置。
						show: true,
						textStyle: {
							 color: '#737373',
						}
					},
					axisLine: {
						show: true,
					},
					axisTick: {
						show: false,
					},
					splitLine:false,
					show: true,
				}],
				series: [
					{
						type: 'bar',
						barMaxWidth: 20,
						zlevel: 10,
						barGap: '100%',
						data: [40, 79, 50,40, 79, 50,40, 79, 50,40, 79, 50,78,65,68],
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#efdd36' 
									}, {
										offset: 1,
										color: '#43ce17' 
									}]
								},
								// barBorderRadius: [30, 30, 0, 0],
							}
						},
					},
					{
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgba(255,255,255,0.1)',
							}
						},
						silent: true,
						barWidth: 0,
						 barGap: '-125%',
						data: [120, 120, 120,120, 120, 120,120, 120, 120,120, 120, 120,120,120,120]
					},
				]
			};
			myChart.setOption(option);
          },
          del() {
              this.obj={'z-index':-1}
          },
        //   showInfoClick() {
        //       this.show=true
        //   }
      }
  }

</script>

<style>
  .centercharts {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 4rem;
    background-color: #fff;
  }
.toptimetext {
    height: .45rem;
    line-height: .45rem;
    border-bottom:1px solid #ddd ;
    position: relative;
}
.toptimetext img {
    position: absolute;
    right: .1875rem;
    top: 50%;
    transform: translateY(-50%);
}
.toptimetext span:first-child {
    font-weight: 700;
    margin-right: .375rem;
    margin-left: .125rem;
}
.bottomcharts {
    display: flex;
    padding: .25rem .125rem;
}
.bottomcharts div {
    flex: 1;
    justify-content: center;
    align-items: center;
}
.bottomcharts div p {
    width: .625rem;
    height: .3rem;
    line-height: .3rem;
    background-color: #F5FAFF;
    text-align: center;
    font-size: .175rem;
}
.bottomcharts div p:first-child {
    background-color: #43CE17;
    color: #fff;
}
.zhucharts2 {
    width: 5.875rem;
    height: 2.25rem;
}
</style>
